<template>
  <el-row>
    <el-col :span="12">
      <label class="label">&nbsp;&nbsp;<el-icon><Edit /></el-icon>专项练习&nbsp;&nbsp;&nbsp;&nbsp;</label>
    </el-col>
    <el-col :span="11" class="dlink">
      <a href="#"  class="alink">&nbsp;<el-icon><CirclePlus /></el-icon>&nbsp;自定义刷题&nbsp;</a>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="23" >
        <el-table :data="modules" style="width: 100%;" header-align="center">
          <el-table-column prop="module" label="名称" width="180" align="center" />
          <el-table-column prop="count" label="总计题数" align="center" />
        </el-table>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
 import {ref,onMounted} from "vue"

 const modules = ref([])

 onMounted(() => {
     modules.value = JSON.parse(localStorage.getItem("modules"))
 })


</script>

<style scoped>
.label{
  background: linear-gradient(90deg, rgba(0,228,255,1) 0%, rgba(129,222,216,1) 100%);
  border-bottom-right-radius: 50px;
  color: white;
  font-weight: bolder;
}
.dlink{
  text-align: right;
}
.alink{
  text-decoration: none;
  color: white;
  font-size: small;
  background: linear-gradient(90deg, rgba(0,228,255,1) 0%, rgba(170,222,129,1) 100%);
  border-radius: 50px;
  padding: 3px;
}
</style>